<template>
  <div class="chub_listActivity">
    <navbar>{{title}}</navbar>
    <div class="content">
      <Slide-bar :height="heights"  :canDrag="isDrag" :list="tabList" :flex=false :index="tabIndex" @on-change="change">
        <div :slot="`slot-item-${k}`" v-for="(i,k) in tabList" class="chub_list_item">
          <LoadMore :height="heights" :load-more="loadMore" :refresh="refresh"   :auto=false  ref="pulldown" down-loading-text="加载中" :has-more="tabList[tabIndex].hasMore">
            <div class="chubList" style="background-color: #eeeeee">
              <ul>
                <li v-for="i in dataList[tabIndex]" style="margin-bottom: 10px">
                  <!--&lt;!&ndash;指南和测评&ndash;&gt;-->
                  <!--<div class="type1" v-if="i.content_type!=3" @click="jump_detail(i.id)">-->
                    <!--<div class="txt">-->
                      <!--<h2 class="vlc-nowrap">{{ i.title }}</h2>-->
                      <!--<h3><p class="vlc-nowrap">{{ i.username }}</p><div>{{ i.publish_time | howLong }}</div></h3>-->
                      <!--<p class="con vmc-nowrap-2">{{ i.introduce }}</p>-->
                    <!--</div>-->
                    <!--<div class="img">-->
                      <!--<div class="hasVideo" v-if="i.has_radio"></div>-->
                      <!--<img class="blockImg" :src="i.headimgurl">-->
                    <!--</div>-->
                  <!--</div>-->
                  <!--野练活动-->
                  <div class="type2" v-if="tabList[tabIndex].name==='野练'" style="margin-top: 10px" @click="go(i.id)">
                    <button class="tag" :class="{ 'red': i.status==1 }">{{ i.status_text }}</button>
                    <div class="left ac_default">
                      <div class="img" v-if="i.img_list!=''" :style="{backgroundImage:'url('+i.img_list+')'}"></div>
                    </div>
                    <div class="right">
                      <h2 class="vlc-nowrap">{{ i.title }}</h2>
                      <h3 class="vlc-nowrap">{{ i.subtitle }}</h3>
                      <p class="vlc-nowrap time">{{i.starts_at | select_time(i.ends_at) }}</p>
                      <div class="vlc-nowrap location">{{ i.address }}</div>
                    </div>
                  </div>
                  <!--其他活动-->
                  <div class="type2" v-if="tabList[tabIndex].name!=='野练'" style="margin-top: 10px" @click="goDrupel(i.nid)">
                    <button class="tag" :class="{ 'red': i.field_status!='已结束'}">{{ i.field_status }}</button>
                    <div class="left ac_default">
                      <div class="img"  :style="{backgroundImage:'url('+i.field_images+')'}"></div>
                    </div>
                    <div class="right">
                      <h2 class="vlc-nowrap">{{ i.title }}</h2>
                      <h3 class="vlc-nowrap">{{ tabList[tabIndex].name }}</h3>
                      <p class="vlc-nowrap time">{{i.field_date_begin | select_time(i.field_date_end) }}</p>
                      <div class="vlc-nowrap location">{{ i.field_destination }}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </LoadMore>
        </div>

      </Slide-bar>

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import js from '../../../cores/chub/list-activity.vue';
  import navbar from '../../../components/base/navbar.vue';
  export default {
    extends: js,
    components:{
      navbar
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  @import "../../../styles/chub.less";
  .chub_listActivity{
  .content{
    /*overflow: auto;*/
    /*height: 100%;*/
  }
  /*.topbanner{*/
  /*height: 40px;*/
  /*line-height: 40px;*/
  /*padding-left: 10px;*/
  /*background-color: #ffffff;*/
  /*}*/
  .vlc-slideBar{
    height:100%;
  .vlc-slideBar-wrapper{
    border-bottom: 1px solid #cccccc;
    padding:8px 0;
  }
  .vlc-slideBar-content-item{
    overflow-y: auto;
  >div.chub_list_item{
     height: 100%;
     padding-bottom: 48px;
   }
  }
  .vlc-slideBar-container{
    height: 100%;
    background-color: #eeeeee;
  }
  }
  }


</style>
